<script setup lang="ts">
import { ref } from 'vue'

// 当前选中的排序方式
const activeSort = ref('综合排序')

// 处理排序点击
const handleSort = (sort: string) => {
  activeSort.value = sort
}
</script>

<template>
  <!-- 推荐商家标题 -->
  <div class="recommend flex items-center justify-center my-6">
    <div class="recommend-line h-[0.5px] bg-[#EBEBEB] flex-1 mx-4"></div>
    <div class="flex items-center">
      <div class="w-[3px] h-4 bg-[#333333] mx-2"></div>
      <p class="text-4 font-medium text-[#333333]">推荐商家</p>
      <div class="w-[3px] h-4 bg-[#333333] mx-2"></div>
    </div>
    <div class="recommend-line h-[0.5px] bg-[#EBEBEB] flex-1 mx-4"></div>
  </div>

  <!-- 推荐方式部分 -->
  <ul class="recommendtype flex justify-between items-center px-4 py-2 text-[#333333] text-3.5">
    <!-- 左侧选项 -->
    <div class="flex space-x-8">
      <li 
        @click="handleSort('综合排序')"
        :class="{ 'text-[#2395ff]': activeSort === '综合排序' }"
        class="flex items-center cursor-pointer"
      >
        综合排序
        <i class="fa fa-caret-down ml-1"></i>
      </li>
      <li 
        @click="handleSort('距离最近')"
        :class="{ 'text-[#2395ff]': activeSort === '距离最近' }"
        class="cursor-pointer"
      >
        距离最近
      </li>
      <li 
        @click="handleSort('销量最高')"
        :class="{ 'text-[#2395ff]': activeSort === '销量最高' }"
        class="cursor-pointer"
      >
        销量最高
      </li>
    </div>
    
    <!-- 右侧筛选 -->
    <li class="flex items-center cursor-pointer">
      筛选
      <i class="fa fa-filter ml-1"></i>
    </li>
  </ul>
</template>

<style scoped>
.recommendtype li {
  transition: color 0.3s ease;
}

.recommendtype li:hover {
  opacity: 0.8;
}
</style>